<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p v-red>123</p>
    <p v-green>123</p>
    <p v-color="'pink'">456</p>
    <p v-color="cl">789</p>
    <hr/>
    <p v-book="bookName"></p>
    <p v-book2>{{bookName}}</p>
</div>
</body>
<script>
    // 指令特点：
    // 1- 以v-开头
    // 2- 指令的组成：v-指令的名字:参数.修饰符=值
    //              v-name:arg.modifier=value
    //    有值：v-text v-html v-if v-else-if v-show
    //    无值: v-pre v-once v-cloak
    //    有修饰符:v-model.number .lazy .trim  v-on:click.native
    //    有参数:v-bind v-on
    // 3- 指令的目的：操作DOM元素
    // 4- 自定义指令可以通过关键词directives,值是一个对象，对象的属性名即是指令的名字，属性的值可以是函数也可以是对象。
    // 5- 自定义的指令会在beforeMount之后，mounted之前执行。
	new Vue({
		el: "#root",
        data:{
		    cl:"yellow",
            bookName:"吞噬星空"
        },
        directives:{
			// 声明了一个名字为red的指令
            // 第一个参数是操作的元素
			red(el){
				// console.log("red",el);
                el.style.color = "red";
            },
            green(el){
				el.style.color = "green";
            },
            // binds:指令相关的属性信息
            color(el,binds){
				el.style.color = binds.value
            },
            book(el,binds){
				el.innerText = "《"+binds.value+"》"
            },
            book2(el){
				el.innerText = "《"+el.innerText+"》"
            }
        },
        beforeMount(){
			console.log("beforeMount")
        },
        mounted(){
			console.log("mounted");
        }
	})
</script>
</html>